<template>
    <div class="aptitudeEdit">
        <h5>发布规则/协议</h5>
        <ul class="inp-ul">
            <li v-if="inpdata.nameLevel1">
                <span class="title">*一级类目</span>
                <span>{{inpdata.nameLevel1}}</span>
                <!-- <el-select v-model="valueLevel1" placeholder="请选择">
                    <el-option v-for="item in options"  :key="item.value"  :label="item.label"  :value="item.value"></el-option>
                </el-select> -->
                <!-- <span class="my-btn btn" style="color:#444;">添加类目</span> -->
            </li>
            <li v-if="inpdata.nameLevel2">
                <span class="title">二级类目</span>
                <span>{{inpdata.nameLevel2}}</span>
                <!-- <el-select v-model="valueLevel2" placeholder="请选择">
                    <el-option v-for="item in options"  :key="item.value"  :label="item.label"  :value="item.value"></el-option>
                </el-select> -->
            </li>
            <li v-if="inpdata.nameLevel3">
                <span class="title">三级类目</span>
                <span>{{inpdata.nameLevel3}}</span>
                <!-- <el-select v-model="valueLevel3" placeholder="请选择">
                    <el-option v-for="item in options"  :key="item.value"  :label="item.label"  :value="item.value"></el-option>
                </el-select> -->
            </li>
            <li>
                <span class="title" >*名称</span>
                <input type="text" v-model="inpdata.name" placeholder="请输入名称">
            </li>
            <li style="align-items: flex-start;">
                <span class="title">*内容</span>
                <quill-editor 
                    v-model="inpdata.content" 
                    ref="myQuillEditor" 
                    :options="editorOption" 
                    @change="onEditorChange($event)">
                </quill-editor>
                <!-- <textarea v-model="inpdata.content"></textarea> -->
            </li>
            <!-- <li>
                <span>附件</span>
                <span class="my-btn btn btn2 my-background" style="margin:0">上传</span>
                <span style="margin-left:30px">支持PDF上传</span>
            </li> -->
            <li style="margin-top:20px;">
                <span>是否上架</span>
                <el-select v-model="inpdata.status" placeholder="请选择">
                    <el-option v-for="item in options"  :key="item.value"  :label="item.label"  :value="item.value"></el-option>
                </el-select>
            </li>
        </ul>
        <div class="btn-box">
            <span class="my-btn btn btn2" style="margin:0;" @click="goback">取消</span>
            <span class="my-btn btn btn2 my-background" @click="gopreview">预览</span>
            <span class="my-btn btn btn2 my-background" @click="releaseClick">发布</span>
        </div>
    </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
    components: {
        quillEditor
    },
    data(){
        return{
            inpdata:'',
            options: [
                {
                    value: 1,
                    label: '是'
                },
                {
                    value: 0,
                    label: '否'
                },
            ],
            // valueLevel1: '',
            // valueLevel2: '',
            // valueLevel3: '',
            //富文本
            // content:'' ,//举报信息
            str:'',
            editorOption: {},
        }
    },
    mounted(){
        this.inpdata=this.$route.query.row
        console.log('inpdataedit',this.inpdata)
    },
    methods:{
        //取消
        goback(){
            this.$router.push('/index/aptitude')
        },
        //跳转预览
        gopreview(){
            this.$router.push({path:'/index/aptitudeDetails',query:{type:2,agreementEntity:this.inpdata}})
        },
        //发布
        releaseClick(){
            var agreementEntity={
                	"categoryName": "",
                    "content": "",
                    "creationTime": '',
                    "id": 0,
                    "labelId": 0,
                    "name": "",
                    "pid": 0,
                    "status": 0,
                    "type": 0
            }
            agreementEntity.id=this.inpdata.id
            agreementEntity.content=this.inpdata.content
            agreementEntity.creationTime=Date.parse(new Date())/1000
            agreementEntity.name=this.inpdata.name
            agreementEntity.pid=this.inpdata.pid
            agreementEntity.status=this.inpdata.status
            agreementEntity.type=this.inpdata.type
            agreementEntity.labelId=this.inpdata.labelId
            if(this.inpdata.content&&this.inpdata.name){
                this.axios({
                    url:'/operate/sys/Agreement/update',
                    method:'post',
                    data:JSON.stringify(agreementEntity),
                    headers: {'Content-Type': 'application/json;charset=UTF-8'}
                }).then(res=>{console.log(res.data)})
                this.$router.go(-1)
            }else{
                alert('请填写必填项')
            }
        },
        //内容改变事件
        onEditorChange({ quill, html, text }) {
            console.log('editor change!', quill, html, text)
            this.inpdata.content = html
        },
        // 转码
        escapeStringHTML(str) {
            str = str.replace(/&lt;/g,'<');
            str = str.replace(/&gt;/g,'>');
            return str;
        },
    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    },
    watch:{
      
    }
}
</script>

<style scoped>
.inp-ul{
    width: 100%;
    margin-top: 30px;
}
.inp-ul>li{
    width: 100%;
    padding: 15px 0;
    display: flex;
    align-items: center;
    
}
.inp-ul>li>span:first-child{
    display: inline-block;
    text-align: right;
    width: 90px;
    margin-right: 15px;
}
.inp-ul>li:nth-child(5){
    align-items: flex-start;
}
.btn-box{
    padding: 10px 50px;
    padding-left: 110px;
    margin-top: 60px;
}
.btn{
    height: 38px;
    line-height: 36px;
    margin-left: 30px;
    font-size: 15px;
}
.btn2{
    width: 100px;
    text-align: center;
}
textarea{
    width: 600px;
    height: 200px;
    padding: 5px 10px;
}
input{
    width: 210px;
    padding-left: 15px;
}
input::-webkit-input-placeholder {
    color: #c5c9cf;
    font-size: 14px;
}
</style>

<style>
.ql-toolbar.ql-snow + .ql-container.ql-snow{
    min-height: 230px;
}
.aptitudeEdit .quill-editor{
    width: calc(100% - 90px);
}
</style>